/**
* 创建者：luyiming
* 该组件用于：
* 创建时间： 2020-01-06 16:16:17
* @param 参数说明
* @emit 事件使用说明
*/
import echarts from "echarts";
import resize from "./mixins/resize";
import {cloneDeep} from "lodash";
export default {
    name: 'FishChart_cmp',
	mixins: [resize],
    props: {
        // 这是示例数据的通途
        example: {
            type: Array,
            default: () => []
        },
		chartData: {
			type: Object,
            default: () => ({
				data: [],
				xdata: [],
				efData: [],
				vmap: [],
				scaData:[],
			})
		},
		isClick: {
			type: Boolean,
			default: () => true
		}
    },
    // 数据
    data() {
        return {
			chart: null,
			filtInd: 0,
			oldRenderData: {},
			option: {},
			colorList: {
				"入库": 'ruku',
				"作业": 'zuoye',
				"运输": 'yunshu',
    			"出库": 'chuku',
    			"在库": 'zaiku',
			},
        }
    },
    // 监听
    watch: {
		chartData(){
			this.initChart()
		}
    },
    // Vue实例初始化完成
    created() {

    },
    // Vue挂载完成
    mounted() {

    },
    // Vue实例销毁前
    beforeDestroy(){

    },
    // 挂载的方法
    methods: {
        /**
        * 方法描述
        */
        exampleFunc(){
            return void 0
		},
		initChart () {
			console.log(this.chartData.data.filter(ite => ite.label))
			debugger
			var series = [{
				name: '总量',
				type: 'line',
				// hoverAnimation: false ,
				lineStyle: {
					width: 5,
				},
				label: {
					show: true,
					position: 'bottom',
					distance: 25,
					color: '#000',
					formatter: (a, b, c, d) => {
						console.log('params',a.name)
						return a.name
					},
					fontFamily: 'pingfang sans-serif',
				},
				data: this.chartData.data
			}]
			this.option = {
				grid:  {
					left: '5%',
					right: '5%',
					top: '40%',
				},
				xAxis: [{
					type: 'category',
					boundaryGap: false,
					data:  this.chartData.xdata,
					show: false,
				}],
				yAxis: [{
					type: 'value',
					show: false,
				}],
				visualMap: {
					show: false,
					dimension: 0,
					type: "piecewise",
					pieces: this.chartData.vmap,  //pieces的值由动态数据决定
					// outOfRange: {
					// 	color: '#1890ff'
					// }
				},
				series: series
			};
			this.filtInd = this.chartData.efData.findIndex(item => item.showEffectOn === 'render')
			const lengt = this.chartData.efData.length;

			this.oldRenderData = new Array().fill({
				value: 1,
				symbol: 'none',
			})
			this.oldRenderData[this.filtInd] = cloneDeep(this.chartData.efData[this.filtInd]);
			this.chartData.efData[this.filtInd] = {
				value: 1,
				symbol: 'none',
			}
			var effectScatterData = this.chartData.efData
			var effectScatterRenderData = this.oldRenderData
			var scatterData = this.getScatterData(this.chartData.scaData)
			var {effectScatter, effectScatterRender} = this.getEffectScatterData(effectScatterData, effectScatterRenderData)
			this.option.series.push(scatterData, effectScatter, effectScatterRender);
			if(this.chart){
				return this.chart.setOption(this.option)
			}
			this.chart = echarts.init(this.$refs.fleshChart)
			this.chart.setOption(this.option)
			const _self = this;
			this.chart.on('click', (params) => {
				if(params.componentIndex === 2 && _self.isClick){
					_self.$emit('clickFish', params.data)
					_self.oldRenderData[_self.filtInd].showEffectOn = "emphasis"
					_self.chartData.efData[_self.filtInd] = cloneDeep(_self.oldRenderData[_self.filtInd]);
					_self.oldRenderData[_self.filtInd] = {
						value: 1,
						symbol: 'none',
					}
					_self.filtInd = params.dataIndex;
					_self.oldRenderData[_self.filtInd] = cloneDeep(_self.chartData.efData[_self.filtInd])
					_self.oldRenderData[_self.filtInd].showEffectOn = "render"
					_self.chartData.efData[_self.filtInd] = {
						value: 1,
						symbol: 'none',
					}
					const newRenderData = _self.oldRenderData
					_self.option.series.pop()
					_self.option.series.pop()
					var {effectScatter, effectScatterRender} = _self.getEffectScatterData(_self.chartData.efData, newRenderData)
					_self.option.series.push(effectScatter, effectScatterRender)
					_self.chart.setOption(_self.option)
				}

			})
		},
		getScatterData(scaData){
			var effectScatter = {
				type: 'scatter',
				coordinateSystem: 'cartesian2d',
				data: scaData, //2d坐标系
				hoverAnimation: false,
				label: {
					show: true,
					position: 'bottom',
					distance: 25,
					color: '#000',
					fontFamily: 'pingfang sans-serif',
					formatter: (item) => {
						return item.data.times
					},
				},
				zlevel: 1
			}
			return effectScatter
		},
		getEffectScatterData(effectScatterData, effectScatterRenderData) {
			var effectScatter = {
				type: 'effectScatter',
				coordinateSystem: 'cartesian2d',
				data: effectScatterData, //2d坐标系
				effectType: 'ripple',
				showEffectOn: 'emphasis',
				rippleEffect: {
					brushType: 'fill',
					scale: 4
				},
				hoverAnimation: false,

				emphasis: {
					itemStyle: {
						shadowBlur: 10,
						shadowColor: '#333',
						borderWidth: '100',
						borderType: 'solid',
						boderColor: '#000',
					},
				},
				label: {
					show: false,
					position: 'top',
					distance: 15,
					fontFamily: 'pingfang sans-serif',
					formatter: (item) => {
						return item.data.status
					}
				},
				zlevel: 2
			}
			var effectScatterRender = {
				type: 'effectScatter',
				coordinateSystem: 'cartesian2d',
				data: effectScatterRenderData, //2d坐标系
				effectType: 'ripple',
				showEffectOn: 'render',
				rippleEffect: {
					brushType: 'fill',
					scale: 4
				},
				hoverAnimation: false,

				emphasis: {
					itemStyle: {
						shadowBlur: 10,
						shadowColor: '#333',
						borderWidth: '100',
						borderType: 'solid',
						boderColor: '#000',
					},
				},
				label: {
					show: true,
					position: 'top',
					distance: 15,
					fontFamily: 'pingfang sans-serif',
					formatter: (item) => {
						return item.data.status
					}
				},
				zlevel: 3
			}
			return {
				effectScatter,
				effectScatterRender,
			}
		}
    },
}
